import { createStore } from 'vuex'
import moduleA from './moduleA'

// 创建一个新的 store 实例
const store = createStore({
  // 模块注册：方式1
  // modules: {
  //   moduleA
  // },
  state: {
    count: 1,
    todos: [
      { id: 1, text: 'todo1', done: true },
      { id: 2, text: 'todo2', done: false }
    ]
  },
  mutations: {
    // increment (state) {
    //   // 变更状态
    //   state.count++
    // }
    // 提交载荷
    // increment (state, n) {
    //   state.count += n
    // }
    // 大多数情况下，载荷应该是一个对象，这样 mutation 会更易读
    increment (state, payload) {
      console.log('root')
      state.count += payload.amount
    },
    decrement (state) {
      state.count--
    },
    test (data) {
      console.log(data) // Proxy {...}
    }
  },
  getters: {
    doneState: state => {
      return state.count * 2
    },
    // Getter 接受 state 作为第一个参数
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    // Getter 也可以接受其他 getter 作为第二个参数
    doneTodosCount (state, getters) {
      return getters.doneTodos.length
    },
    // 通过让 getter 返回一个函数，来实现给 getter 传参，对 store 里的数组进行查询时有用
    getTodoById: state => id => {
      return state.todos.find(todo => todo.id === id)
    }
  },
  actions: {
    // increment (context) {
    //   context.commit('increment')
    // }
    // ES2015 参数解构
    // increment ({ commit }, amount) {
    //   commit('increment', amount)
    // },
    // action 内部执行异步操作
    // incrementAsync ({ commit }) {
    //   setTimeout(() => {
    //     commit('increment')
    //   }, 1000)
    // }
    // 组合 Action
    increment ({ commit }, amount) {
      return new Promise((resolve) => {
        setTimeout(() => {
          commit('increment', amount)
          resolve()
        }, 1000)
      })
    },
    // 也可以在另一个 action 中调用 action
    decrement ({ dispatch, commit }) {
      return dispatch('increment', { amount: 5 }).then(() => {
        commit('decrement')
      })
    }
  }
})

// 模块动态注册：方式二
store.registerModule('moduleA', moduleA)

export default store